<template>
  <div class="news-detail">
    <div class="container">
      <div class="left">
        <a-card>
          <div class="content" v-if="!!artivlesDetail">
            <h1>{{ artivlesDetail.title }}</h1>
            <a-flex align="center">
              <div>
                <a-avatar :size="24" :src="getFile(artivlesDetail?.avatar)" />
                <span class="createByName">{{ artivlesDetail.createByName
                  }} 发布于 {{ artivlesDetail.publishTime }}</span>
              </div>
              <div class="toolItem">
                <svg class="icon-third" aria-hidden="true" style="font-size: 4px">
                  <use xlink:href="#icon-third-liulan2"></use>
                </svg>
                <span class="toolTitle">{{ artivlesDetail.commentNum || 0 }}人浏览</span>
              </div>
            </a-flex>
            <a-divider><i class="a-icon-view"></i></a-divider>
            <article class="article" v-html="artivlesDetail.content"></article>
          </div>
        </a-card>
      </div>
	 <div>
		 <HotNews class="right"></HotNews> 
	  </div>
    
    </div>
  </div>
</template>

<script lang="ts" setup> 
import { onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import { getColumnArticleDetail } from "@/api/column"

const route = useRoute();

const artivlesDetail = ref();


const id = route.params?.id ?? "";
onMounted(async () => {
  await getArticlesDetails();
});


//获取新闻详情
async function getArticlesDetails() {
  const res: any = await getColumnArticleDetail(id);
  artivlesDetail.value = res.result;
}
</script>

<style lang="less" scoped>
.news-detail {
  margin-top: 10px;
  margin-bottom:20px;
}

.news_header {
  background-color: rgba(255, 255, 255, .5);
  backdrop-filter: blur(10px);
}

.container {
  position: relative;
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  min-height: 580px;
  margin: 0 auto;
}

.a-breadcrumb {
  height: 40px;
  font-size: 13px;
  padding-top: 40px;
}

:deep(.a-breadcrumb__item) {
  &:last-child {
    span {
      color: #f84521;
    }
  }
}

.content {
  width: 860px;

  h1 {
    font-size: 23px;
    line-height: 30px;
    padding: 20px 0 14px;
  }

  span {
    color: #606266;
    line-height: 18px;
  }
}

.article {
  margin-top: 5px;
  overflow: hidden;
  min-height:400px;
}

.right {
  margin-left: 50px;
  margin-top: 10px;
}

.createByName {
  font-size: 14px;
  margin: 0 10px;
}

.toolItem {
  display: flex;
  align-items: center;
  margin-left: 30px;
}

.toolItem:hover {
  cursor: pointer;
}

.toolTitle {
  font-size: 12px;
  margin-left: 5px;
}
</style>
